<style>
    .skin-list li {
        float: left;
        width: 33.33333%;
        padding: 5px;
    }

    .skin-list li a {
        display: block;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    }

    .skin-list li a span {
        display: block;
        float: left;
    }

    .skin-list li.active a {
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .skin-list li.active p {
        color: #fff;
    }
</style>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
        <li class="active"><a href="#control-sidebar-setting-tab" data-toggle="tab" aria-expanded="true"><i
                    class="fa fa-wrench"></i></a></li>
        <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
        <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <!-- Home tab content -->
        <div class="tab-pane active" id="control-sidebar-setting-tab">
            <h4 class="control-sidebar-heading">{:__('Layout Options')}</h4>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox"
                        data-config="multiplenav" {if $Think.config.fastadmin.multiplenav}checked{/if}
                        class="pull-right"> {:__('Multiple Nav')}</label>
                <p>{:__("Toggle the top menu state (multiple or single)")}</p>
            </div>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox"
                        data-config="multipletab" {if $Think.config.fastadmin.multipletab}checked{/if}
                        class="pull-right"> {:__('Multiple Tab')}</label>
                <p>{:__("Always show multiple tab when multiple nav is set")}</p>
            </div>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox"
                        data-layout="sidebar-collapse" class="pull-right"> {:__('Toggle Sidebar')}</label>
                <p>{:__("Toggle the left sidebar's state (open or collapse)")}</p>
            </div>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox"
                        data-enable="expandOnHover" class="pull-right"> {:__('Sidebar Expand on Hover')}</label>
                <p>{:__('Let the sidebar mini expand on hover')}</p>
            </div>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox"
                        data-menu="show-submenu" class="pull-right"> {:__('Show sub menu')}</label>
                <p>{:__('Always show sub menu')}</p>
            </div>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox"
                        data-controlsidebar="control-sidebar-open" class="pull-right"> {:__('Toggle Right Sidebar
                    Slide')}</label>
                <p>{:__('Toggle between slide over content and push content effects')}</p>
            </div>
            <div class="form-group"><label class="control-sidebar-subheading"><input type="checkbox"
                        data-sidebarskin="toggle" class="pull-right"> {:__('Toggle Right Sidebar Skin')}</label>
                <p>{:__('Toggle between dark and light skins for the right sidebar')}</p>
            </div>
            <h4 class="control-sidebar-heading">{:__('Skins')}</h4>
            <ul class="list-unstyled clearfix skin-list">
                <li><a href="javascript:;" data-skin="skin-blue" class="clearfix full-opacity-hover">
                        <div><span style="width: 20%; height: 27px; background: #4E73DF;"></span><span
                                style="width: 80%; height: 27px; background: #f4f5f7;"></span></div>
                    </a>
                    <p class="text-center no-margin">Blue</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-black" class="clearfix full-opacity-hover">
                        <div><span style="width: 20%; height: 27px; background: #000;"></span><span
                                style="width: 80%; height: 27px; background: #f4f5f7;"></span></div>
                    </a>
                    <p class="text-center no-margin">Black</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-purple" class="clearfix full-opacity-hover">
                        <div><span style="width: 20%; height: 27px; background: #605ca8;"></span><span
                                style="width: 80%; height: 27px; background: #f4f5f7;"></span></div>
                    </a>
                    <p class="text-center no-margin">Purple</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-green" class="clearfix full-opacity-hover">
                        <div><span style="width: 20%; height: 7px;" class="bg-green-active"></span><span
                                class="bg-green" style="width: 80%; height: 7px;"></span></div>
                        <div><span style="width: 20%; height: 20px; background: #000;"></span><span
                                style="width: 80%; height: 20px; background: #f4f5f7;"></span></div>
                    </a>
                    <p class="text-center no-margin">Green</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-red" class="clearfix full-opacity-hover">
                        <div><span style="width: 20%; height: 7px;" class="bg-red-active"></span><span class="bg-red"
                                style="width: 80%; height: 7px;"></span></div>
                        <div><span style="width: 20%; height: 20px; background: #000;"></span><span
                                style="width: 80%; height: 20px; background: #f4f5f7;"></span></div>
                    </a>
                    <p class="text-center no-margin">Red</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-yellow" class="clearfix full-opacity-hover">
                        <div><span style="width: 20%; height: 7px;" class="bg-yellow-active"></span><span
                                class="bg-yellow" style="width: 80%; height: 7px;"></span></div>
                        <div><span style="width: 20%; height: 20px; background: #000;"></span><span
                                style="width: 80%; height: 20px; background: #f4f5f7;"></span></div>
                    </a>
                    <p class="text-center no-margin">Yellow</p>
                </li>

                <li><a href="javascript:;" data-skin="skin-blue-light" class="clearfix full-opacity-hover">
                        <div><span style="width: 100%; height: 7px; background: #4E73DF;"></span></div>
                        <div><span style="width: 100%; height: 20px; background: #f9fafc;"></span></div>
                    </a>
                    <p class="text-center no-margin" style="font-size: 12px">Blue Light</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-black-light" class="clearfix full-opacity-hover">
                        <div><span style="width: 100%; height: 7px; background: #000;"></span></div>
                        <div><span style="width: 100%; height: 20px; background: #f9fafc;"></span></div>
                    </a>
                    <p class="text-center no-margin" style="font-size: 12px">Black Light</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-purple-light" class="clearfix full-opacity-hover">
                        <div><span style="width: 100%; height: 7px; background: #605ca8;"></span></div>
                        <div><span style="width: 100%; height: 20px; background: #f9fafc;"></span></div>
                    </a>
                    <p class="text-center no-margin" style="font-size: 12px">Purple Light</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-green-light" class="clearfix full-opacity-hover">
                        <div><span style="width: 100%; height: 7px;" class="bg-green"></span></div>
                        <div><span style="width: 100%; height: 20px; background: #f9fafc;"></span></div>
                    </a>
                    <p class="text-center no-margin" style="font-size: 12px">Green Light</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-red-light" class="clearfix full-opacity-hover">
                        <div><span style="width: 100%; height: 7px;" class="bg-red"></span></div>
                        <div><span style="width: 100%; height: 20px; background: #f9fafc;"></span></div>
                    </a>
                    <p class="text-center no-margin" style="font-size: 12px">Red Light</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-yellow-light" class="clearfix full-opacity-hover">
                        <div><span style="width: 100%; height: 7px;" class="bg-yellow"></span></div>
                        <div><span style="width: 100%; height: 20px; background: #f9fafc;"></span></div>
                    </a>
                    <p class="text-center no-margin" style="font-size: 12px">Yellow Light</p>
                </li>

                <li><a href="javascript:;" data-skin="skin-black-blue" class="clearfix full-opacity-hover">
                        <div><span style="width: 20%; height: 27px; background: #000;"><span
                                    style="width: 100%; height: 3px; margin-top:10px; background: #4E73DF;"></span></span><span
                                style="width: 80%; height: 27px; background: #f4f5f7;"></span></div>
                    </a>
                    <p class="text-center no-margin">Black Blue</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-black-purple" class="clearfix full-opacity-hover">
                        <div><span style="width: 20%; height: 27px; background: #000;"><span
                                    style="width: 100%; height: 3px; margin-top:10px; background: #605ca8;"></span></span><span
                                style="width: 80%; height: 27px; background: #f4f5f7;"></span></div>
                    </a>
                    <p class="text-center no-margin">Black Purple</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-black-green" class="clearfix full-opacity-hover">
                        <div><span style="width: 20%; height: 27px; background: #000;"><span
                                    style="width: 100%; height: 3px; margin-top:10px;"
                                    class="bg-green"></span></span><span
                                style="width: 80%; height: 27px; background: #f4f5f7;"></span></div>
                    </a>
                    <p class="text-center no-margin">Black Green</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-black-red" class="clearfix full-opacity-hover">
                        <div><span style="width: 20%; height: 27px; background: #000;"><span
                                    style="width: 100%; height: 3px; margin-top:10px;"
                                    class="bg-red"></span></span><span
                                style="width: 80%; height: 27px; background: #f4f5f7;"></span></div>
                    </a>
                    <p class="text-center no-margin">Black Red</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-black-yellow" class="clearfix full-opacity-hover">
                        <div><span style="width: 20%; height: 27px; background: #000;"><span
                                    style="width: 100%; height: 3px; margin-top:10px;"
                                    class="bg-yellow"></span></span><span
                                style="width: 80%; height: 27px; background: #f4f5f7;"></span></div>
                    </a>
                    <p class="text-center no-margin">Black Yellow</p>
                </li>
                <li><a href="javascript:;" data-skin="skin-black-pink" class="clearfix full-opacity-hover">
                        <div><span style="width: 20%; height: 27px; background: #000;"><span
                                    style="width: 100%; height: 3px; margin-top:10px; background: #f5549f;"></span></span><span
                                style="width: 80%; height: 27px; background: #f4f5f7;"></span></div>
                    </a>
                    <p class="text-center no-margin">Black Pink</p>
                </li>
            </ul>
        </div>
        <!-- /.tab-pane -->
        <!-- Home tab content -->
        <div class="tab-pane" id="control-sidebar-home-tab">
            <h4 class="control-sidebar-heading">{:__('Home')}</h4>
        </div>
        <!-- /.tab-pane -->
        <!-- Settings tab content -->
        <div class="tab-pane" id="control-sidebar-settings-tab">
            <h4 class="control-sidebar-heading">{:__('Setting')}</h4>
        </div>
        <!-- /.tab-pane -->
    </div>
</aside>
<!-- /.control-sidebar -->